.main-content {
  .post-copyright {
    margin: 2rem 0 0;
    padding: 0.5rem 1rem;
    border-left: 4px solid $main-color;
    background-color: #f9f9f9;
    list-style: none;
    width: 100%;

    li {
      display: list-item;
      text-align: -webkit-match-parent;
      padding: 0.2rem 0;

      a {
        color: $main-color;
      }
    }
  }
}

@mixin dark-mode {
  .main-content {
    .post-copyright {
      border-left: 4px solid $main-color;
      background-color: $dark-skeleton-color;

      li {
        a {
          color: $dark-main-color;
          text-decoration: underline;
          transition: all 500ms ease 0ms;
          &:hover {
            color: $dark-main-hover-color;
          }
        }
      }
    }
  }
}

@media (prefers-color-scheme: dark) {
  @include dark-mode;
}

[data-theme="dark"] {
  @include dark-mode;
}
